import { computed, defineComponent, inject, onMounted, reactive, ref } from 'vue'
import { IconCaretUp, IconDelete, IconArrowFall, IconCheck,IconCaretDown } from '@arco-design/web-vue/es/icon';
import { Progress, Dropdown, Doption, Popover } from "@arco-design/web-vue";
import {numberToCurrencyNo} from '@/utils/util'
import {relationShip} from '@/constants/indexTree'
import ADropDown from '../../../components/aDropDown/index'
import IndexTreeList from '../../components/IndexTreeList/index.vue'
import './metricsNode.css'
import Bus from '@/utils/emmit'
import {CompareType} from '@/constants/indexTree'
import {NumberUnit, NumberValue} from '@/constants/indexTree'
import { useRouter, useRoute} from 'vue-router';
import {removeAllChildDom} from '@/utils/util'
export default defineComponent({
  name: 'MetricsNode',
  inject: ["getGraph", "getNode"],
  components: { ADropDown, IndexTreeList },
  emits: ['addIndexItem'],
  setup: (props, {emit}) => {
    const getNode: any = inject('getNode')
    const state = reactive(getNode().getData())
    const { onRemoveEvent,onAddIndexCard,clickMetricsCard,onPopoverDelete,  ...rest } = state
    const {value, metricsSetting, target} = state
    let unit:any
    if (metricsSetting?.numberFormat === 'WAN' || metricsSetting?.numberFormat === 'YI') {
        unit = NumberUnit[metricsSetting?.numberFormat]
    } else {
        unit = ''
    }
    let numberTargetValue:any
    if (typeof(state?.value)=='string' && state?.value.indexOf('%') > -1) {
      numberTargetValue=Number(state?.value.replace('%', ''))
    } else {
      numberTargetValue=Number(state?.value)
    }

    const targetValue = numberTargetValue * Number(NumberValue[metricsSetting?.numberFormat])

    console.log('单位转化为数值', Number(NumberValue[metricsSetting?.numberFormat]))
    const precess = target && (Number(targetValue)/target)
    // const precess = target && (Number(value)/target)
    const symbolVisible = ref<boolean>(false)
    const isActive = ref<boolean>(false)

    const numberType = Number(state?.gapValue.replace('%', ''))
    const compareType = state?.compare?.compareType != 'VAL'
    // 点击指标卡配置属性
    const metricsConfig = () => {
        clickMetricsCard?.(rest) // 点击选中指标重构脑图
        Bus.emit('clickMetricsConfig', rest) // 配置项更新为当前选中的指标
    }
    const removeEvent = () => {
      onPopoverDelete?.(false)
      onRemoveEvent?.(rest)      
    }
    const addIndexCard = (v:any, o:any) => {
        symbolVisible.value = false
        onAddIndexCard?.(v, o)
        onPopoverDelete?.(false)
    }

    const onPopupVisibleChange = (v:any) => {
      isActive.value = v
      onPopoverDelete?.(v)
    }

    const handleStopScroll = (v:any) => {
      onPopoverDelete?.(v)
    }
    return () => {
      return (
        <>
            <div class="single-index-card">
                <div class="index-card">
                    <div 
                        class={["index-card-inner-content", {cardActive: state.heightLightLine}]}

                        onClick={()=>metricsConfig()}>
                        <div class='index-line-border' v-show={state?.rootTreeCard}></div>
                        <div class="index-card-wrapper">
                                <Progress
                                    v-show={state?.target}
                                    class="index-pregress"
                                    percent={precess}
                                    color='#3C6EFF'
                                    show-text={false}
                                    type="circle"
                                    trackColor="#eee"
                                    size="small"
                                    strokeWidth={7}
                                ></Progress>
                            <div class="index-card-wrapper_middle">
                                <span class="index-card-name" title={state?.cardName}>{state.cardName}</span>
                                <span class='index-card-num' >{state?.value}{unit}</span>
                            </div>
                            <div class="index-card-wrapper_right">
                            <span class="col_grey">{state?.compare?.compareName}</span>
                                <span class="dis-flex">
                                    <span class='col_red' v-show={numberType > 0 && compareType}>
                                    <IconCaretUp/>
                                    </span>
                                    <span class="col_240" v-show={numberType < 0 && compareType}>
                                        <IconCaretDown/>
                                    </span>
                                    <span class={{col_red: numberType >= 0, col_240: numberType < 0}}>
                                    {state?.gapValue}
                                    </span>
                                </span>
                                
                            </div>
                        </div>
                        </div>
                    <Popover
                        position="rt"
                        trigger='click'
                        content-class='popver-index-card'
                        class="metrics-symbolcard-popover"
                        v-model={symbolVisible.value}
                        onPopupVisibleChange={(v:any)=>{
                          handleStopScroll(v)
                      }}
                        v-slots={{
                            content: () => (
                                <>
                                    <ADropDown cardType='indexCard'
                                        onAddSymbolItem={(v:any)=>{
                                            const domDelBtn = document.getElementsByClassName('metrics-symbolcard-popover')
                                            domDelBtn[0].remove()
                                            addIndexCard(v, {
                                                symbolType: true,
                                                cardType: 'metrics'
                                            })
                                        }}
                                    />
                                </>
                            )
                        }}
                    >
                        <div class="index-front-arrow_icon">
                            <IconArrowFall />
                        </div>
                    </Popover>
                    
                </div>
            </div>
            <Popover
              position="bottom"
              trigger="click"
              content-class="popver-delete"
              onPopupVisibleChange={onPopupVisibleChange}
              class="metricsCardIconDom"
              v-slots={{
                content: () => (
                  <>
                    <div style={{ fontSize: '12px', color: '#33353B' }}>
                      <span>确认删除？</span>
                      <span
                        style={{
                          color: '#FF1A3B',
                          cursor: 'pointer',
                          paddingRight: '4px'
                        }}
                        onClick={() =>{
                          const domDelBtn :any  = document.getElementsByClassName('metricsCardIconDom')
                          domDelBtn[0].remove()
                          // removeAllChildDom(domDelBtn)
                          removeEvent()
                        } }
                      >
                        删除
                      </span>
                    </div>
                  </>
                )
              }}
          >
            <div class="index-card-delete">
              <IconDelete  class={{activeIconDelete: isActive.value}}/>
            </div>
            </Popover>
          </>
      )
    }
  },

})
